import React from 'react'
import './App.css'
import { Layout, Menu, Breadcrumb, PageHeader, Button} from 'antd';
import {
    DesktopOutlined,
    PieChartOutlined,
    FileOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
const {  Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
// 菜单头
const routes = [
    {
        path: 'index',
        breadcrumbName: '控制台',
    },
    {
        path: 'first',
        breadcrumbName: '班级管理',
    },
    {
        path: 'second',
        breadcrumbName: '班级列表',
    },
];
//侧边栏
class App extends React.Component {
    state = {
        collapsed: false,
    };

    onCollapse = collapsed => {
        console.log(collapsed);
        this.setState({ collapsed });
    };
    render() {
        const { collapsed } = this.state;
        return <div>
            <Layout style={{ minHeight: '100vh' }}>
                <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
                    <div className="logo" />
                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                        <Menu.Item key="1" icon={<PieChartOutlined />}>
                            控制台
            </Menu.Item>
                        <Menu.Item key="2" icon={<DesktopOutlined />}>
                            班级管理
            </Menu.Item>
                        {/* 班级管理 */}
                        <SubMenu key="sub1" icon={<UserOutlined />} title="班级管理">
                            <Menu.Item key="3">学的好的</Menu.Item>
                            <Menu.Item key="4">学的一般的</Menu.Item>
                            <Menu.Item key="5">未来下个班的</Menu.Item>
                        </SubMenu>
                        {/* 管理员权限 */}
                        <SubMenu key="sub2" icon={<TeamOutlined />} title="权限管理">
                            <Menu.Item key="6">管理员</Menu.Item>
                            <Menu.Item key="8">学生权限</Menu.Item>
                        </SubMenu>
                        <Menu.Item key="9" icon={<FileOutlined />}>
                            底部
            </Menu.Item>
                    </Menu>
                </Sider>
                {/* 另一个 */}
                <Layout className="site-layout">
                    <PageHeader
                        className="site-page-header"
                        title="芜湖"
                        breadcrumb={{ routes }}
                        subTitle="起飞"
                    />

                    <Content style={{ margin: '0 16px' }}>

                        <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>控制台</Breadcrumb.Item>
                            <Breadcrumb.Item>班级列表</Breadcrumb.Item>
                        </Breadcrumb>
                        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                            <ul className='main-ul'>
                                <li>
                                    <div>
                                        <div className='left'>班级：web1906A  人数：17人，第二周期</div>
                                        <div className='right'>
                                            <Button type="primary">评分</Button>
                                            <Button type="primary" danger>删除</Button>
                                        </div>
                                        <div className='clear'></div>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <div className='left'>班级：web1906A  人数：17人，第二周期</div>
                                        <div className='right'>
                                            <Button type="primary">评分</Button>
                                            <Button type="primary" danger>删除</Button>
                                        </div>
                                        <div className='clear'></div>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <div className='left'>班级：web1906A  人数：17人，第二周期</div>
                                        <div className='right'>
                                            <Button type="primary">评分</Button>
                                            <Button type="primary" danger>删除</Button>
                                        </div>
                                        <div className='clear'></div>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <div className='left'>班级：web1906A  人数：17人，第二周期</div>
                                        <div className='right'>
                                            <Button type="primary">评分</Button>
                                            <Button type="primary" danger>删除</Button>
                                        </div>
                                        <div className='clear'></div>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <div className='left'>班级：web1906A  人数：17人，第二周期</div>
                                        <div className='right'>
                                            <Button type="primary">评分</Button>
                                            <Button type="primary" danger>删除</Button>
                                        </div>
                                        <div className='clear'></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
                </Layout>
            </Layout>
        </div>
    }
}
export default App;